CSS_based animation - background-color animation

code:
                <div class="spec">
                    <div id="color2"></div> 
                    <input type="button" value="animate color and rotate" 
                    onclick="document.getElementById('color2').classList.toggle('swap2')">
                </div>
                <style>
                    #color2{width: 20vw; height: 15vw;background-color: skyblue;}
                    @keyframes change {
                        0% { background-color: red; transform: scale(0.5) rotate(-45deg);}
                        50% { background-color: green; transform: scale(0.5) rotate(45deg); }
                        100% { background-color: burlywood; transform: scale(1) rotate(0deg);}
                    }
                    #color2.swap2 {animation: change 5s linear 0.3s;}
                </style>
            

code:
            <div id="color3"></div>
            <style>
                #color3 { width: 20vw; height: 10vw; animation: coloring 5s linear 0.3s infinite;}
                @keyframes coloring {
                    0% { background-color: red; transform: scale(1) rotate(0deg); }
                    25% { background-color: orange; transform: scale(0.8) rotate(5deg);}   
                    50% { background-color: green; transform: scale(0.6) rotate(10deg);}
                    75% { background-color: blue; transform: scale(0.8) rotate(5deg); }
                    100% { background-color: red; transform: scale(1) rotate(0deg);}
                }
            </style>
        

code:
            <div class="spec">
                <div id="color1"></div>
                <input type="button" value="swap color and rotate" 
                onclick="document.getElementById('color1').classList.toggle('swap1')">
            </div>
            <style>
                input{background: lightgreen; text-align: center; font-size: 1vw; margin: 0.5vw; cursor: pointer;}
                #color1 { width: 20vw; height: 15vw; background-color: burlywood; transition: background-color 1s }
                #color1.swap1 {background-color: #e00; transform: scale(0.5) rotate(45deg);}
            </style>